<template>
  <a-card :bordered="false" class="card-area">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-form-item label="名称" >
          <a-input autocomplete="off"  v-model="queryParam.processName.value"></a-input>
        </a-form-item>
        <a-form-item label="机构" >
          <AkTreeSelect :url="sysDepartUrl.tree"  v-model="queryParam.tenantId.value"
                        :defaultFirst="true" :allowClean="false" @change="tenantIdChange"/>

        </a-form-item>
        <a-form-item label="模型" v-if="!!queryParam.tenantId.value">
          <ak-select-tag :url="`${activitModelUrl.named}?tenantId=${queryParam.tenantId.value}`" v-model="queryParam.modelId.value"></ak-select-tag>
        </a-form-item>
        <a-form-item>
              <span  class="table-page-search-submitButtons">
                 <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" >重置</a-button>
                  <a-button  type="danger" icon="delete"  v-if="selectedRowKeys.length > 0"  @click="batchDel">批量删除</a-button>
              </span>
        </a-form-item>
      </a-form>
    </div>


    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="ellipsis" slot-scope="text">
          <ak-ellipsis :value="text"/>
        </span>
        <template slot="flowImg" slot-scope="text, record">
          <AkImgPreview :url="concatUrl(appApiBaseUrl,url.getFlowImg)+'?id='+record.id"/>
        </template>

        <span slot="action" slot-scope="text, record"  class="table-operator">
          <a @click="handleDelete(record.id)">删除</a>
          <a @click="handleDetail(record)">明细</a>
        </span>
      </a-table>
    </div>
    <history-process-detail-modal ref="modalForm" @ok="modalFormOk"/>

  </a-card>
</template>

<script>
    import AkfhListMixin from '../../mixin/AkfhListMixin';
    import {appApiBaseUrl} from '../../config/constant.config'
    import {activitModelUrl, sysDepartUrl, activitiHistoryProcessUrl} from '../../api/url';
    import { filterObj, concatUrl } from '../../utils/util'
    import AkEllipsis from '../../components/akfh/AkEllipsis'
    import AkTreeSelect from '../../components/akfh/AkTreeSelect'
    import AkSelectTag from '../../components/akfh/AkSelectTag'
    import { postAction } from '../../api/manage'
    import qs from 'qs';
    import AkImgPreview from '../../components/akfh/file-preview/AkImgPreview'
    import { Modal } from 'ant-design-vue'
    import HistoryProcessDetailModal from './modal/HistoryProcessDetailModal.vue';

    export default {
      name: 'HistoryProessList',
      components: { AkImgPreview, AkTreeSelect, AkSelectTag,AkEllipsis, Modal, HistoryProcessDetailModal},
      describe:'历史流程列表',
        mixins:[AkfhListMixin],
        data(){
          return {
            queryParam: {
              modelId: {
                column: 'modelId',
                type: 'eq',
                value: ''
              },
              tenantId:{
                column:'tenantId',
                type:'eq',
                value:''
              },
              processName:{
                column:'processName',
                type:'like',
                value:''
              }

            },
            columns:[
              {
                title: '#',
                dataIndex: '',
                key: 'rowIndex',
                width: 120,
                align: "center",
                customRender: function (t, r, index) {
                  return parseInt(index) + 1;
                }
              },
              {
                title: '流程定义名称',
                align: "center",
                dataIndex: 'processDefinitionName',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '流程定义Key',
                align: "center",
                dataIndex: 'processDefinitionKey',
                scopedSlots: {customRender: 'ellipsis'},
              },

              {
                title: '名称',
                align: "center",
                dataIndex: 'name',
                scopedSlots: {customRender: 'ellipsis'},
              },

              {
                title: '描述',
                align: "center",
                dataIndex: 'description',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '是否挂起',
                align: "center",
                dataIndex: 'suspendedFlag_dictText',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '启动时间',
                align: "center",
                dataIndex: 'startTime',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '结束时间',
                align: "center",
                dataIndex: 'endTime',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '启动人',
                align: "center",
                dataIndex: 'startUserId',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '流程启动活动id',
                align: "center",
                dataIndex: 'startActivityId',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '删除原因',
                align: "center",
                dataIndex: 'deleteReason',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '上级流程实例id',
                align: "center",
                dataIndex: 'superProcessInstanceId',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '流程图',
                align: "center",
                dataIndex: 'flowImg',
                scopedSlots: {customRender: 'flowImg'},
              },
              {
                title: '业务标识',
                align: "center",
                dataIndex: 'businessKey',
                scopedSlots: {customRender: 'ellipsis'},
              },

              {
                title: '操作',
                dataIndex: 'action',
                align: "center",
                scopedSlots: {customRender: 'action'},
              }
            ],
            url:activitiHistoryProcessUrl,
            sysDepartUrl:sysDepartUrl,
            activitModelUrl:activitModelUrl,
            appApiBaseUrl:appApiBaseUrl,

          }

        },
        methods:{
          concatUrl,
         
          // 修改流程名称
          handleUpdateName(record){
            let el = this.$createElement('input');
            let that = this;
            Modal.confirm({
              closable:true,
              content:el,
              title:'请输入名字',
              onOk(){
                that.loading = true;
                postAction(that.url.updateName, qs.stringify({id:record.id, name:el.elm.value||''}))
                  .then(res=>{
                    if(res.success){
                      that.$message.success(res.message);
                      that.loadData();
                    }
                  }).finally(()=>{
                  that.loading = false;
                })
              }
            })
          },
          tenantIdChange(){

            if(this.dataSource.length == 0){
              this.loadData();
            }
          },
          // 多租户设计
          beforeLoadData(){

            return !!this.queryParam.tenantId.value;
          },
          // 非通过那个查询条件
          getQueryParams() {

            //获取查询条件
            let sqp = {};
            for (let queryParamKey in this.queryParam) {
              sqp[this.queryParam[queryParamKey]['column']] = this.queryParam[queryParamKey]['value']
            }
            sqp.pageNo = this.ipagination.current;
            sqp.pageSize = this.ipagination.pageSize;
            return filterObj(sqp);
          },

        }
    }
</script>

<style scoped>

</style>